<div class="panel panel-default header-pane"
     ng-controller="HeaderController">

  <div class="panel-heading clearfix">

    <div class="pull-left" ng-switch="activeConfigStatus.state">
      <button type="button" class="navbar-toggle collapsed"
              ng-if="common.sdcExecutionMode != pipelineConstant.SLAVE"
              ng-class="{'selected' : !hideLibraryPanel}"
              ng-click="toggleLibraryPanel()"
              title="{{'home.header.toggleLibraryPane' | translate}}">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="panel-title pull-left" ng-if="common.sdcExecutionMode === pipelineConstant.CLUSTER">
        <h3 class="pull-left" translate="home.header.clusterManagerNode">Cluster Manager: </h3>
      </div>

      <div class="panel-title pull-left" ng-if="common.sdcExecutionMode === pipelineConstant.SLAVE">
        <h3 class="pull-left" translate="home.header.workerNode">Worker:</h3>
      </div>

      <div class="panel-title pull-left"
           ng-switch-when="RUNNING">
        <h3 class="pull-left">{{pipelineConfig.info.name}}: </h3>
        <h3 class="pull-left" translate="home.header.uptime">Uptime</h3>
        <h3 class="pull-left" am-time-ago="common.pipelineStatus.lastStatusChange"></h3>

        <i class="fa fa-spinner fa-spin fa-2x green-color"></i>
      </div>


      <div class="panel-title pull-left"
           ng-switch-when="STOPPING">
        <h3 class="pull-left" translate="home.header.stoppingPipeline">Stopping Pipeline</h3>
        <i class="fa fa-spinner fa-spin fa-2x red-color"></i>
      </div>

      <div class="panel-title pull-left"
           ng-switch-default>
        <h3 class="pull-left" translate="home.header.definePipeline">Define Pipeline:</h3>
        <h3 class="pull-left">{{activeConfigInfo.name}}</h3>
      </div>

    </div>


    <div class="pull-right" ng-if="pipelineConfig && activeConfigStatus.state !== 'STOPPING'">

      <div class="pull-left" ng-cloak
           ng-if="!isPipelineReadOnly && common.sdcExecutionMode != pipelineConstant.SLAVE"
           ng-hide="previewMode || snapshotMode || activeConfigStatus.state === 'STOPPING'">
        <div class="pipelineAgent-status pull-right" ng-hide="common.saveOperationInProgress > 0">
          <span class="glyphicon glyphicon-ok-circle"></span>
          <span translate="global.messages.info.saveOperationInProgress"></span>
        </div>

        <div class="pipelineAgent-status pull-right" ng-show="common.saveOperationInProgress > 0"
             translate="global.messages.info.savingConfiguration">
        </div>
      </div>

      <div class="btn-group" dropdown ng-hide="previewMode || snapshotMode">
       <span class="btn btn-link dropdown-toggle icon-button" dropdown-toggle aria-expanded="true"
             tooltip-placement="bottom" tooltip="{{'home.header.more' | translate}}"
             tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
             tooltip-popup-delay="500"
             ng-click="$event.stopPropagation();">
          <i class="fa fa-ellipsis-h fa-14x"></i>
        </span>
        <ul class="dropdown-menu pull-right" role="menu">

          <li role="presentation"
              ng-if="!isPipelineRunning && isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])  && common.sdcExecutionMode != pipelineConstant.SLAVE"
              ng-class="{'disabled': !pipelineConfig.valid}">
            <a href="#" dropdown-toggle ng-click="!pipelineConfig.valid || resetOffset()">
              <i class="fa fa-power-off"></i> {{'home.resetOffset.title' | translate}}
            </a>
          </li>

          <li role="presentation"
              ng-if="!isPipelineRunning && isAuthorized([userRoles.admin, userRoles.manager]) && common.sdcExecutionMode != pipelineConstant.CLUSTER">
            <a href="#" dropdown-toggle ng-click="viewSnapshots()">
              <i class="glyphicon glyphicon-camera"></i> {{'home.header.snapshots' | translate}}
            </a>
          </li>

          <li role="presentation" ng-if="isPipelineRunning && !monitoringPaused">
            <a href="#" dropdown-toggle ng-click="pauseMonitoring()">
              <i class="fa fa-pause"></i> {{'home.header.pauseMonitoring' | translate}}
            </a>
          </li>

          <li role="presentation" ng-if="isPipelineRunning && monitoringPaused">
            <a href="#" dropdown-toggle ng-click="continueMonitoring()">
              <i class="fa fa-play"></i> {{'home.header.continueMonitoring' | translate}}
            </a>
          </li>

        </ul>
      </div>

      <div class="btn-group issues-dropdown"
           ng-show="pipelineConfig && pipelineConfig.issues.issueCount > 0 && !previewMode && !snapshotMode">
        <a class="btn btn-link dropdown-toggle" data-toggle="dropdown"
           tooltip-placement="top"
           tooltip="{{'home.header.issues' | translate}}"
           tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
           tooltip-popup-delay="500">
          <span class="fa fa-exclamation-triangle fa-12x"></span>
          <span ng-hide="iconOnly" translate="home.header.issues">Issues</span>
          <span class="badge" ng-bind="pipelineConfig.issues.issueCount"></span>
        </a>
        <ul class="dropdown-menu pull-right scrollable-menu" role="menu" aria-labelledby="dropdownMenu1">

          <li role="presentation" class="dropdown-header"
              ng-if="pipelineConfig.issues.pipelineIssues.length"
              translate="home.header.pipelineIssues">
            Pipeline Issues
          </li>
          <li role="presentation" ng-repeat="issue in pipelineConfig.issues.pipelineIssues">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="onIssueClick(issue)">{{issue.message}}</a>
          </li>
          <li role="presentation" class="divider" ng-if="pipelineConfig.issues.pipelineIssues.length"></li>

          <li role="presentation" class="dropdown-header"
              ng-repeat-start="(instanceName, issues) in pipelineConfig.issues.stageIssues"
              ng-bind="getStageInstanceLabel(instanceName)">
          </li>
          <li role="presentation" ng-repeat="issue in issues">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="onIssueClick(issue, instanceName)"
               ng-bind="getIssuesMessage(instanceName, issue)"></a>
          </li>
          <li ng-repeat-end role="presentation" class="divider" ng-if="!$last"></li>

        </ul>
      </div>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'global.form.undo' | translate}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
         ng-disabled="!canUndo()"
         ng-click="undo()">
        <span class="fa fa-undo fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'global.form.redo' | translate}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
         ng-disabled="!canRedo()"
         ng-click="redo()">
        <span class="fa fa-repeat fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{selectedType === pipelineConstant.STAGE_INSTANCE ?
          ('global.form.deleteStage' | translate) + ' ' + selectedObject.uiInfo.label : ('global.form.deleteStream' | translate)}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-disabled="selectedType === pipelineConstant.PIPELINE"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
         ng-click="deleteSelection()">
        <span class="fa fa-trash fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{('global.form.duplicateStage' | translate) + ' ' + selectedObject.uiInfo.label}}"
         tooltip-popup-delay="500"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-disabled="selectedType !== pipelineConstant.STAGE_INSTANCE || selectedObject.uiInfo.stageType === pipelineConstant.SOURCE_STAGE_TYPE"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
         ng-click="duplicateStage()">
        <span class="glyphicon glyphicon-duplicate fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'global.form.autoArrange' | translate}}"
         tooltip-popup-delay="500"
         ng-hide="previewMode || snapshotMode || pipelineConfig.stages.length <= 1"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
         ng-click="autoArrange()">
        <span class="fa fa-random fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.snapshots' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && common.sdcExecutionMode != pipelineConstant.CLUSTER"
          ng-show="isPipelineRunning && !snapshotMode"
          ng-click="viewSnapshots()">
        <span class="glyphicon glyphicon-camera fa-14x"></span>
      </a>

      <a class="btn btn-danger btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.closeSnapshot' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
          ng-show="snapshotMode"
          ng-click="closeSnapshot()">
        <span class="glyphicon glyphicon-camera fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.preview' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-hide="isPipelineRunning || previewMode || snapshotMode"
          ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
          ng-click="previewPipeline()"
          ng-disabled="!pipelineConfig.previewable">
        <span class="glyphicon glyphicon-eye-open fa-14x"></span>
      </a>

      <a class="btn btn-danger btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.closePreview' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-show="previewMode"
          ng-if="isAuthorized([userRoles.admin, userRoles.creator])"
          ng-click="closePreview()">
        <span class="glyphicon glyphicon-eye-close fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'home.header.validate' | translate}}"
         tooltip-trigger="mouseenter"
         tooltip-popup-delay="500"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-disabled="!pipelineConfig.valid"
         ng-click="validatePipeline()">
        <span class="glyphicon glyphicon-ok-circle fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.start' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-hide="isPipelineRunning || previewMode || snapshotMode"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
          ng-disabled="!pipelineConfig.valid"
          ng-click="startPipeline()">
        <span class="glyphicon glyphicon-play fa-14x"></span>
      </a>

      <a class="btn btn-danger btn-link icon-button"
          tooltip-placement="bottom" tooltip="{{'home.header.stop' | translate}}"
          tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
          tooltip-popup-delay="500"
          ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && common.sdcExecutionMode != pipelineConstant.SLAVE"
          ng-click="stopPipeline()"
          ng-show="isPipelineRunning && !snapshotMode">
        <span class="glyphicon glyphicon-stop fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom" tooltip="{{'home.header.stageLibrary' | translate}}"
         tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
         tooltip-popup-delay="500"
         ng-if="common.sdcExecutionMode != pipelineConstant.SLAVE"
         ng-class="{'btn-selected': $storage.hideStageLibraryPanel}"
         ng-hide="isPipelineRunning || previewMode || snapshotMode"
         ng-click="$storage.hideStageLibraryPanel = !$storage.hideStageLibraryPanel">
        <span class="fa fa-th fa-14x"></span>
      </a>


      <div class="btn-group notifications-dropdown"
           ng-show="isPipelineRunning && !snapshotMode && common.sdcExecutionMode != pipelineConstant.CLUSTER">
        <a class="btn btn-link dropdown-toggle"
           data-toggle="dropdown"
           tooltip-placement="top"
           tooltip="{{'home.header.notifications' | translate}}"
           tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
           tooltip-popup-delay="500">
          <span class="fa fa-bell fa-12x"></span>
          <span ng-hide="iconOnly" translate="home.header.notifications">Notifications</span>
          <span class="badge"
                ng-if="triggeredAlerts.length > 0"
                ng-bind="triggeredAlerts.length"></span>
        </a>
        <ul class="dropdown-menu pull-right scrollable-menu" role="menu" aria-labelledby="dropdownMenu1">

          <li role="presentation" class="dropdown-header" ng-if="triggeredAlerts.length > 0"
              translate="home.header.alerts">
            Alerts
          </li>

          <li role="presentation"
              ng-repeat="alert in triggeredAlerts">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="onNotificationClick(alert)">

              <span ng-if="alert.gauge.value.exceptionMessage">
                <strong>{{alert.rule.label}}: </strong> {{alert.gauge.value.exceptionMessage}}
              </span>

              <span ng-if="!alert.gauge.value.exceptionMessage" ng-bind="alert.rule.alertText"></span>

              <button type="button" class="close" aria-label="Close" ng-click="deleteTriggeredAlert(alert, $event)">
                <span aria-hidden="true">&times;</span>
              </button>
            </a>
          </li>

          <li role="presentation" class="dropdown-header"
              translate="home.header.emptyAlerts"
              ng-if="triggeredAlerts.length === 0">
            It’s all good! You don’t have any new alerts.
          </li>

        </ul>
      </div>

    </div>

  </div>

  <div class="panel-body"></div>
</div>
